<template>
	<van-cell class="article-item"
		:to="{name:'article',params:{articleId:article.art_id.toString()}}"
	>
		
		<div slot="title" class="title van-multi-ellipsis--l2">{{article.title}}</div>
		
		<div slot="label">
			<div v-if="article.cover.type === 3" class="cover-wrap">
				<div v-for="(item,index) in article.cover.images" :key="index" class="cover-wrap-item">
					<van-image fit="cover" :src="item" class="cover-image"></van-image>
				</div>
			</div>
			<span>{{article.aut_name}}</span>
			<span>{{article.comm_count}}</span>
			<span>{{article.pubdate|relativeTime}}</span>
		</div>
		<van-image
			fit="cover"
			v-if="article.cover.type === 1"
			:src = "article.cover.images[0]"
			class="right-cover"
		></van-image>
	</van-cell>
</template>

<script>
	

	export default {
		name:'articleItem',
		props:{
			article: {
			      type: Object,
			      required: true
			    }
		},
		data(){
			return {}
		}
	}
</script>

<style scoped lang="less">
	.title{
		font-size:16px;
		color: #3a3a3a;
	}
	/deep/ .van-cell__value{
		flex:unset;
		width:116px;
		height:73px;
		margin-left:15px;
	}
	.cover-wrap{
		padding:15px 0;
		display:flex;
		.cover-wrap-item{
			flex:1;
			&:not(:last-child) {
			 padding-right: 4px;
			}
			.cover-image{
				width:100%;
				height:73px;
			}
		}
	}
	.right-cover{
		width:116px;
		height:73px;
	}
</style>
